<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- layuicms -->
	<link rel="stylesheet" href="/static/plugins/layui/layuicms2.0/public.css" media="all" />
	
	<!-- jQuery  -->
    <script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui  -->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all" />
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- layui dtree -->
	<link rel="stylesheet" href="/static/plugins/layui/extends/dtree/dtree.css">
	<link rel="stylesheet" href="/static/plugins/layui/extends/dtree/font/dtreefont.css">
	
</head>
<body>
<div class="layui-row layui-col-space5">
	<!-- 左边面板【start】 -->
	<div class="layui-col-md2">
		<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;" id="id_tree_pannel_left">
			<div id="id_tree"></div>
			<script>
				$(function () {
			
					layui.extend({
						dtree: '{/}/static/plugins/layui/extends/dtree/dtree'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
					}).use(['dtree','layer','jquery'], function(){
						var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery;
						
						// 初始化树
						var DemoTree = dtree.render({
							elem: "#id_tree",
							url: '/api/inter/newsItem/dtree',
							initLevel: "4",
							toolbar:true,
							toolbarWay:"follow",
							toolbarShow:[],
							width:'100%',
							menubar:true,
							menubarTips:{
								group:["refresh"]
							},
							toolbarExt: []
						});
						
						// 绑定节点点击
						dtree.on("node('id_tree')" ,function(obj){
							var objd = obj.param;

							$.ajax({
								type: "post",
								url: "/api/inter/hypeText/getHypeText",
								data: {
									type : 1,
									id: objd.nodeId
								},
								dataType: "json",
								success: function (res) {
									$('#id_detail').html(res.data.content);
								},
								error: function () {
								    alert("加载失败！")
								}
							});
						});
					});
				});
			</script>
		</div>
	</div>
	<!-- 左边面板【end】 -->
	
	<!-- 右边面板【start】 -->
	<div class="layui-col-md10">
		<div class="layui-panel" id="id_tree_pannel_right" style="overflow: auto;">
			<p id="id_detail" style="padding: 10px; width: 100%;">--</p>
		</div>
	</div>
	<!-- 右边面板【end】 -->
	
	<script type="text/javascript">
	$(function() {
		console.log('浏览器的外部宽度window.outerWidth---' + window.outerWidth);
		console.log('浏览器的内部宽度window.innerWidth---' + window.innerWidth);
		console.log('浏览器的xx宽度---document.body.clientWidth---' + document.body.clientWidth);
		console.log('可视的宽度---document.body.scrollWidth---' + document.body.scrollWidth);
		console.log('浏览器的外部高度window.outerHeight---' + window.outerHeight);
		console.log('浏览器的内部高度window.innerHeight---' + window.innerHeight);
		console.log('浏览器的xx高度---document.body.clientHeight---' + document.body.clientHeight);
		console.log('可视的高度---document.body.scrollHeight---' + document.body.scrollHeight);
		$('#id_tree_pannel_left').css('height', (window.innerHeight - 40) + 'px');
		$('#id_tree_pannel_right').css('height', (window.innerHeight - 40) + 'px');
	});
	</script>
</div>

</body>
</html>